<template>
  <div id="app" class="container">
    <br />
    <br />
    <div class="main clearfix">
      <div class="content">
        <div class="filter">
          <div class="filter-wrapper clearfix">
            <ul class="filter-tag" ref="tag">
              <li :class="['_j_tag', tag === 'show' ? 'on' : null]">
                <a href="javascript:;" @click="currButton(null)">全部</a>
              </li>
              <li
                :class="['_j_tag', tag === item.id ? 'on' : null]"
                v-for="item in navList"
                :key="item.id"
                @click="currButton(item.id)"
              >
                <a href="javascript:;">{{ item.name }}</a>
              </li>
            </ul>
            <a
              href="javascript:void(0);"
              class="trigger _j_trigger_btn"
              @click="changeNav"
            >
              {{ showText ? '更多' : '收起' }}
            </a>
          </div>
        </div>

        <div class="guide-list">
          <div
            class="item clearfix"
            v-for="item in list"
            :key="item.id"
            @click="toDetailButton(item.id)"
          >
            <a href="javascript:void(0)" class="_j_item">
              <div class="img">
                <img :src="item.coverUrl" />
              </div>
              <div class="detail">
                <h3>{{ item.title }}</h3>
                <ul style="height: 90px; overflow: hidden;">
                  {{
                    item.summary
                  }}
                </ul>
                <div class="extra">
                  <span class="location">
                    <i></i>
                    {{ item.destName }}
                  </span>
                  <span class="view">
                    <i></i>
                    {{ item.viewnum }}
                  </span>
                </div>
              </div>
            </a>
          </div>

          <div style="float: right;">
            <div style="float: left;">
              <span style="line-height: 30px;">
                共{{ totalPages }}页 / {{ totalElements }}条&nbsp;&nbsp;&nbsp;
              </span>
            </div>
            <div id="pagination" class="jq-pagination" style="display: inline;">
              <a
                class="prev disabled"
                href="javascript:void(0);"
                jp-role="prev"
                jp-data="0"
              >
                上一页
              </a>
              <a
                href="javascript:void(0);"
                jp-role="page"
                jp-data="1"
                class="active"
              >
                1
              </a>
              <a href="javascript:void(0);" jp-role="page" jp-data="2">2</a>
              <a
                class="next"
                href="javascript:void(0);"
                jp-role="next"
                jp-data="2"
              >
                下一页
              </a>
              <a
                class="last"
                href="javascript:void(0);"
                jp-role="last"
                jp-data="2"
              >
                尾页
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="side-sales">
        <h3>本周热卖</h3>
        <ul>
          <li>
            <a href="javascript:;" target="_blank">
              <span class="image">
                <img
                  src="../../public/img/wKgBEFs6E4yAPz00AAhnvJUJ1j8238.gif"
                />
              </span>

              <div
                title="广州长隆野生动物世界门票    随买随用 ／广州长隆旅游度假区／一票通玩 ／ 快速出票快捷入园 ／ 含空中览车及小火车/亲子乐园/赠送电子导览／自然零距离／广州长隆野生动物园"
                class="title"
              >
                广州长隆野生动物世界门票 随买随用 ／广州...
              </div>
              <span class="price">¥260</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank">
              <span class="image">
                <img
                  src="../../public/img/wKgED1wweM2AVCMFAAzr37WPWDI967.gif"
                />
              </span>

              <div
                title="广州长隆欢乐世界门票   当天可买／广州长隆旅游度假区／快速出票快捷入园／收藏店铺送卷送攻略／广东番禺汉溪长隆/长隆成人票／情侣票／家庭票／双人票／儿童票"
                class="title"
              >
                广州长隆欢乐世界门票 当天可买／广州长隆旅...
              </div>
              <span class="price">¥187</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank">
              <span class="image">
                <img
                  src="../../public/img/wKgED1wdwVmAVaZUADon6OL7_xw084.gif"
                />
              </span>

              <div
                title="当天可订/广州长隆野生动物世界门票/长隆野生动物园/广州长隆旅游度假区/含缆车小火车/南北门均可取票（提前1天规则退）"
                class="title"
              >
                当天可订/广州长隆野生动物世界门票/长隆野生...
              </div>
              <span class="price">¥256</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank">
              <span class="image">
                <img
                  src="../../public/img/wKgBEFrEdj-Ac-nXAAOvgGsSLJI85.jpeg"
                />
              </span>

              <div
                title="广州长隆水上乐园门票 一票通玩（电子票／当地必玩／免预约／超级大喇叭/热浪谷/意想不到的水上乐园）"
                class="title"
              >
                广州长隆水上乐园门票 一票通玩（电子票／当地...
              </div>
              <span class="price">¥122</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank">
              <span class="image">
                <img
                  src="../../public/img/wKgED1wk2LeAC2NJAAJQtab6Yqw67.jpeg"
                />
              </span>

              <div
                title="寻味广州1日游（6人小团·探黄埔军校陈家祠·电车看广州塔+沙面·西关美食秘籍·本地人带玩）"
                class="title"
              >
                寻味广州1日游（6人小团·探黄埔军校陈家祠·...
              </div>
              <span class="price">¥288</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { ApiThemes, ApiThemesList } from '@/utils/api.js'
export default {
  data() {
    return {
      navList: [],
      showText: true,

      // 主题列表
      list: [],

      // 当前选中主题
      tag: 'show',

      // 总页数
      totalPages: 0,

      // 总条数
      totalElements: 0,
    }
  },

  created() {
    this.getData()
    this.currButton(null)
  },

  methods: {
    async getData() {
      let { data: res } = await ApiThemes()
      //   console.log(res)
      if (res.code !== 200) return alert('请求失败！')
      this.navList = res.data
    },

    // 导航栏展开与收起
    changeNav() {
      if (this.$refs.tag.offsetHeight === 32) {
        this.$refs.tag.style.height = 'auto'
        this.showText = false
      } else {
        this.$refs.tag.style.height = '32px'
        this.showText = true
      }
    },

    // 切换主题
    async currButton(id) {
      if (!id) {
        this.tag = 'show'
      } else {
        this.tag = id
      }
      let res = await ApiThemesList({
        currentPage: 1,
        themeId: id,
      })
      this.list = res.data.data.content
      this.totalPages = res.data.data.totalPages
      this.totalElements = res.data.data.totalElements
      console.log(res.data)
    },

    // 点击去详情页
    toDetailButton(id) {
      console.log(id)
      this.$router.push(`strategyDetail?id=${id}`)
    },
  },
}
</script>

<style scoped>
@import '../css/travelguide.css';
/* @import '../css/jqPagination.css'; */
</style>
